<template>
	<view>
		<view class="my-tabbar">
			<view 
				v-for="(item,index) in myTabbar" 
				:key="index" 
				:class="['my-tabbar-item', {'my-tabbar-item-checked':item.name==tabbarIndex}] " 
				:style="{width: 100/myTabbar.length+'%'}"
			>
			
				<view class="my-tabbar-line" @click="changeTabbar(item.name)">
					<view>
						<uni-icons :type="item.icon" size="22" :color="item.name==tabbarIndex?'#1296db':''"></uni-icons>
					</view>
					<view>
						{{item.value}}
					</view>
				</view>
			</view>
		</view>
		<view class="my-tabbar-content">
			<view
				v-for="(item,index) in myTabbar"
				:key="index"
				v-show="item.name==tabbarIndex"
			>
				<slot :name="item.name"></slot>
			</view>
		</view>
	</view>
		
	
</template>

<script>
	export default {
		name:"MyTabbar",
		props: {
			tabbarIndex:{
				type:String
			},
		    myTabbar:{
		      type: Array
		    },
		},
		data() {
			return {
				changeTabbar(name){
					this.$emit("changeTabbar",name);
				}
			};
		},

	}
</script>

<style lang="scss">
	.my-tabbar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		width: 100%;
		background: white;
		letter-spacing: 1rpx;
		.my-tabbar-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			.my-tabbar-line{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
			}
		}
		.my-tabbar-item-checked{
			color: #1296db;
			font-weight: bolder;
			.my-tabbar-line{
				border-bottom: solid 5rpx #1296db;
			}
		}
	}
	.my-tabbar-content{
		margin-top:10rpx;
	}
</style>
